<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">

                <fieldset class="layui-elem-field">
                    <legend>搜索条件</legend>
                    <div class="layui-field-box">

                        <form class="layui-form layui-row layui-col-space16">
                            <div class="layui-col-md4">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </div>
                                    <input type="text" name="userCode" value="" placeholder="用户编码" class="layui-input"
                                        lay-affix="clear">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-input-wrap">
                                    <input type="text" name="username" placeholder="用户名称" lay-affix="clear"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-input-wrap" id="ID-laydate-rangeLinked">
                                    <div class="layui-input-inline">
                                        <input type="text" name="createTimeStart" autocomplete="off"
                                            id="ID-laydate-start-date-1" class="layui-input" placeholder="创建日期开始">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" name="createTimeEnd" autocomplete="off"
                                            id="ID-laydate-end-date-1" class="layui-input" placeholder="创建日期结束">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-btn-container layui-col-xs12">
                                <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                                <button type="reset" id="userReset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </form>
                    </div>
                </fieldset>

                <table class="layui-hide" id="userTest" lay-filter="userTest"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="toolbarUserPage">
    <div class="layui-btn-container">
         <!-- <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button> -->
        <!-- <button class="layui-btn layui-btn-sm" id="dropdownButton">
        下拉按钮 
        <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button> -->
        <!-- <button class="layui-btn layui-btn-sm" id="reloadTest">
        重载测试 <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button> -->
        <button class="layui-btn layui-btn-sm" id="userAdd">
            新增  <i class="layui-icon layui-icon-add-1 layui-font-12"></i>
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDel">批量删除</button>
        
        
        <!-- <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
        <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
        <i class="layui-icon layui-icon-down layui-font-12"></i>
        </button> -->
    </div>
</script>
    <script type="text/html" id="userBarDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="setRole">分配角色</a>
        <a class="layui-btn layui-btn-xs" lay-event="updatePsd">修改密码</a>
        <a class="layui-btn layui-btn-xs" lay-event="more">
        更多 
        <i class="layui-icon layui-icon-down"></i>
        </a>
    </div>
    </script>
    <script>
        layui.use(['table', 'dropdown', 'form', 'laydate'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var constants = layui.constants;
            var AjaxUtils = layui.AjaxUtils;
            var toast = layui.toast;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.$;
            var tree = layui.tree;

            // 接口地址
            var dataApiUrl = constants.API_BASE_URL + "/auth/user/page";
            // 创建渲染实例
            table.render({
                elem: '#userTest',
                url: dataApiUrl,
                method: 'post',
                contentType: 'application/json',
                toolbar: '#toolbarUserPage',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                headers: { 'token': localStorage.getItem("token") },
                request: {
                    pageName: 'pageNum', // 页码的参数名称，默认：page
                    limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
                },
                response: {
                    statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
                },
                page: true,
                size: 'lg',
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'userCode', width: '10%', title: '用户编码' },
                    { field: 'username', width: '10%', title: '用户名称' },
                    { field: 'roleName', width: '10%', title: '角色名称' },
                    { field: 'deptName', width: '10%', title: '部门名称' },
                    { field: 'orgName', width: '10%', title: '公司名称' },
                    {
                        field: 'status', title: '状态', width: '5%', templet: function (d) {
                            if (d.status == 1) {
                                return '<span style="color: #36b368">启用</span>';
                            } else if (d.status == 0) {
                                return '<span style="color: #f56c6c">禁用</span>';
                            }
                            else {
                                alert("状态错误");
                            }
                        }
                    },
                    { field: 'mobile', width: '10%', title: '手机号' },
                    { field: 'email', width: '10%', title: '邮箱' },
                    { field: 'createTime', width: '10%', title: '创建时间' },
                    { fixed: 'right', title: '操作', width: '20%', minWidth: 80, toolbar: '#userBarDemo' }
                ]],
                done: function () {
                    var id = this.id;
                    // 下拉按钮测试
                    dropdown.render({
                        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'add',
                            title: '添加'
                        }, {
                            id: 'update',
                            title: '编辑'
                        }, {
                            id: 'delete',
                            title: '删除'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'add':
                                    layer.open({
                                        title: '添加',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'update':
                                    if (data.length !== 1) return layer.msg('请选择一行');
                                    layer.open({
                                        title: '编辑',
                                        type: 1,
                                        area: ['80%', '80%'],
                                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                                    });
                                    break;
                                case 'delete':
                                    if (data.length === 0) {
                                        return layer.msg('请选择一行');
                                    }
                                    layer.msg('delete event');
                                    break;
                            }
                        }
                    });

                    // 重载测试
                    dropdown.render({
                        elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                        data: [{
                            id: 'reload',
                            title: '重载'
                        }, {
                            id: 'reload-deep',
                            title: '重载 - 参数叠加'
                        }, {
                            id: 'reloadData',
                            title: '仅重载数据'
                        }, {
                            id: 'reloadData-deep',
                            title: '仅重载数据 - 参数叠加'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            switch (obj.id) {
                                case 'reload':
                                    // 重载 - 默认（参数重置）
                                    table.reload('userTest', {
                                        where: {
                                            abc: '123456',
                                            //userTest: '新的 test2',
                                            //token: '新的 token2'
                                        },
                                        /*
                                        cols: [[ // 重置表头
                                          {type: 'checkbox', fixed: 'left'},
                                          {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'},
                                          {field:'sex', title:'性别', width:80, edit: 'text', sort: true},
                                          {field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{= d.experience }} 分</div>'},
                                          {field:'logins', title:'登入次数', width:100, sort: true, totalRow: true},
                                          {field:'joinTime', title:'加入时间', width:120}
                                        ]]
                                        */
                                    });
                                    break;
                                case 'reload-deep':
                                    // 重载 - 深度（参数叠加）
                                    table.reload('userTest', {
                                        where: {
                                            abc: 123,
                                            userTest: '新的 test1'
                                        },
                                        //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                        //cols: ins1.config.cols
                                    }, true);
                                    break;
                                case 'reloadData':
                                    // 数据重载 - 参数重置
                                    table.reloadData('userTest', {
                                        where: {
                                            abc: '123456',
                                            //userTest: '新的 test2',
                                            //token: '新的 token2'
                                        },
                                        scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                        height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                        //url: '404',
                                        //page: {curr: 1, limit: 30} // 重新指向分页
                                    });
                                    break;
                                case 'reloadData-deep':
                                    // 数据重载 - 参数叠加
                                    table.reloadData('userTest', {
                                        where: {
                                            abc: 123,
                                            userTest: '新的 test1'
                                        }
                                    }, true);
                                    break;
                            }
                            layer.msg('可观察 Network 请求参数的变化');
                        }
                    });

                    // 行模式
                    dropdown.render({
                        elem: '#rowMode',
                        data: [{
                            id: 'default-row',
                            title: '单行模式（默认）'
                        }, {
                            id: 'multi-row',
                            title: '多行模式'
                        }],
                        // 菜单被点击的事件
                        click: function (obj) {
                            var checkStatus = table.checkStatus(id)
                            var data = checkStatus.data; // 获取选中的数据
                            switch (obj.id) {
                                case 'default-row':
                                    table.reload('userTest', {
                                        lineStyle: null // 恢复单行
                                    });
                                    layer.msg('已设为单行');
                                    break;
                                case 'multi-row':
                                    table.reload('userTest', {
                                        // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                        lineStyle: 'height: 95px;'
                                    });
                                    layer.msg('即通过设置 lineStyle 参数可开启多行');
                                    break;
                            }
                        }
                    });
                },
                error: function (res, msg) {
                    toast.error({
                        message: msg,
                    });
                },
                complete: function (xhr, ts) {
                    if (xhr.responseJSON.code == 520) {
                        AjaxUtils.redirectToLogin();
                    }
                }
            });

            // 批量删除用户
            function sureBatchDelUser(dataList) {
                AjaxUtils.request(
                    {
                        url: '/auth/user/del/batch',
                        type: 'POST',
                        data: dataList
                    }, function (data) {
                        layer.msg('删除成功', { icon: 1 });
                        // 重新加载表格
                        table.reloadData('userTest', {
                            page: {
                                curr: 1 // 重新从第 1 页开始
                            }
                        });
                    },
                    function (error) {
                        toast.error({
                            message: error,
                        });
                    }
                );
            }

            // 工具栏事件
            table.on('toolbar(userTest)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'batchDel':
                        var data = checkStatus.data;
                        if (data.length === 0) {
                            return layer.msg('至少选择一行');
                        }

                        // 获取对象ID
                        var ids = [];
                        for (var i = 0; i < data.length; i++) {
                            ids.push(data[i].id);
                        }

                        layer.confirm('确认批量删除吗？', {
                            btn: ['确定', '关闭'] //按钮
                        }, function () {
                            sureBatchDelUser(ids);
                        }, function () { });
                        break;
                    case 'getData':
                        var getData = table.getData(id);
                        layer.alert(layui.util.escape(JSON.stringify(getData)));
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                };
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(userTest)', function (obj) {
                var event = obj.event;

                if (event === 'email-tips') {
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性配置项'
                    });
                }
            });

            // 触发单元格工具事件
            table.on('tool(userTest)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据

                if (obj.event === 'edit') {
                    // 编辑
                    addUpdate('edit', data);
                }
                else if (obj.event === 'setRole') {
                    // 分配角色
                    setRole(data);
                }
                else if (obj.event === 'updatePsd') {
                    // 修改密码
                    updatePsd(data);
                }
                else if (obj.event === 'more') {
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '查看',
                            id: 'detail'
                        }, {
                            title: '删除',
                            id: 'del'
                        }],
                        click: function (menudata) {
                            if (menudata.id === 'detail') {
                                addUpdate('detail', data);
                            } else if (menudata.id === 'del') {
                                layer.confirm('确定删除 [' + data.username + '] 么', function (index) {
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    layer.close(index);
                                    // 向服务端发送删除指令
                                    AjaxUtils.request(
                                        {
                                            url: '/auth/user/' + data.id,
                                            type: 'DELETE'
                                        }, function (data) {
                                            layer.msg('删除成功', { icon: 1 });
                                        },
                                        function (error) {
                                            toast.error({
                                                message: error,
                                            });
                                        }
                                    );
                                });
                            }
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(userTest)', function (obj) {

            });

            // 触发表格单选框选择
            table.on('radio(userTest)', function (obj) {

            });

            // 行单击事件
            table.on('row(userTest)', function (obj) {
                //console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(userTest)', function (obj) {

            });

            // 单元格编辑事件
            table.on('edit(userTest)', function (obj) {
                var field = obj.field; // 得到字段
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到所在行所有键值
                // 值的校验
                if (field === 'email') {
                    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.userTest(obj.value)) {
                        layer.tips('输入的邮箱格式不正确，请重新编辑', this, { tips: 1 });
                        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
                    }
                }
                // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                layer.msg('编辑成功', { icon: 1 });

                // 其他更新操作
                var update = {};
                update[field] = value;
                obj.update(update);
            });

            // 日期
            laydate.render({
                elem: '.demo-table-search-date',
                type: 'datetime'
            });

            // 日期范围 - 左右面板联动选择模式
            laydate.render({
                elem: '#ID-laydate-rangeLinked',
                range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
            });

            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                var field = data.field; // 获得表单字段

                // 执行搜索重载
                table.reloadData('userTest', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });

            // 重置
            $("#userReset").click(function (data) {
                table.reloadData('userTest', {
                    where: {},
                    scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                    page: { curr: 1, limit: 10 } // 重新指向分页
                });
            })

            // 新增
            $("#userAdd").on('click', function () {
                addUpdate('add');
            });

            // 新增，编辑，查看 弹框
            function addUpdate(operType, data) {
                if (operType == 'edit') {
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px'],
                        title: false,
                        title: '用户编辑',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        // maxmin: true, // 允许全屏最小化
                        anim: 'slideLeft', // 0-6 的动画形式，-1 不开启
                        closeBtn: 2,
                        content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="id" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="用户名必填" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="mobile"  lay-verify="phone"  placeholder="手机号" lay-reqtext="手机号" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="email"   lay-verify="email" placeholder="邮箱" lay-reqtext="邮箱" autocomplete="off" class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="deptId" placeholder="部门ID" readonly class="layui-input">
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">部门</label>
                                        <div class="layui-input-block">
                                        <input type="text" name="deptName" lay-verify="required"  placeholder="部门" readonly class="layui-input">
                                    </div></div>

                                    <div class="layui-form-item">         
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch" lay-filter="demo-checkbox-filter">
                                        </div></div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="userAdd">确认</button>
                                    </div>
                                </div>`,
                        success: function (layero, index, that) {
                            // 对弹层中的表单进行初始化渲染
                            form.render();
                            form.val('filter-test-layer', {
                                "id": data.id,
                                "username": data.username,
                                "mobile": data.mobile,
                                "email": data.email,
                                "deptId": data.deptId,
                                "deptName": data.deptName,
                                "status": data.status
                            });

                            // 部门选择
                            $("#bumen-select").on('click', function (data) {
                                layer.open({
                                    type: 1,
                                    area: ['480px', '400px'],
                                    content: `<div style="padding: 16px;">
                                            <div class="layui-card">
                                                <div class="layui-card-body">
                                                    <div id="ID-tree-demo"></div>
                                                </div>
                                            </div>
                                        </div>`,
                                    title: '选择部门',
                                    shadeClose: true,
                                    success: function (layero, index, that) {
                                        layui.use(function () {
                                            var tree = layui.tree;
                                            var layer = layui.layer;
                                            var util = layui.util;
                                            var toast = layui.toast;
                                            var ajaxUtils = layui.AjaxUtils;

                                            ajaxUtils.request(
                                                {
                                                    url: '/auth/org/all-tree-org',
                                                    type: 'GET'
                                                }, function (data) {
                                                    // 渲染
                                                    tree.render({
                                                        elem: '#ID-tree-demo',
                                                        data: data,
                                                        showCheckbox: false,  // 是否显示复选框
                                                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                                                        id: 'demo-id-1',
                                                        isJump: true, // 是否允许点击节点时弹出新窗口跳转
                                                        // edit: ['add', 'update', 'del'],
                                                        click: function (obj) {
                                                            var data = obj.data;  //获取当前点击的节点数据
                                                            var orgType = data.orgType;

                                                            if (orgType != 3) {
                                                                layer.msg('请选择部门');
                                                                return;
                                                            }

                                                            layer.close(index);// 关闭弹框
                                                            // 设置部门ID
                                                            form.val('filter-test-layer', {
                                                                "deptId": data.id,
                                                                "deptName": data.title
                                                            });
                                                        }
                                                    });
                                                    // 按钮事件
                                                    util.event('lay-on', {
                                                        getChecked: function (othis) {
                                                            var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

                                                            layer.alert(JSON.stringify(checkedData), { shade: 0 });

                                                        },
                                                        setChecked: function () {
                                                            tree.setChecked('demo-id-1', [3]); // 勾选对应 id 值的节点
                                                        },
                                                        reload: function () {
                                                            tree.reload('demo-id-1', {}); // 重载实例
                                                        }
                                                    });
                                                },
                                                function (error) {
                                                    toast.error({
                                                        message: error,
                                                    });
                                                }
                                            );
                                        });
                                    }
                                });
                            });


                            // 表单提交事件
                            form.on('submit(userAdd)', function (data) {
                                var field = data.field; // 获取表单字段值
                                // 校验


                                // 此处可执行 Ajax 等操作


                                // 获取复选框的值
                                var selectedValues = 1;
                                if ($('#status').is(':checked')) {
                                    // 选中
                                    selectedValues = 1;
                                } else {
                                    // 未选中
                                    selectedValues = 0;
                                }

                                var user = {
                                    id: field.id,
                                    username: field.username,
                                    mobile: field.mobile,
                                    email: field.email,
                                    deptId: field.deptId,
                                    status: selectedValues
                                }
                                AjaxUtils.request(
                                    {
                                        url: '/auth/user',
                                        type: 'POST',
                                        data: user
                                    }, function (data) {
                                        // 关闭弹层&刷新表格
                                        layer.close(index);

                                        // 重新加载表格
                                        table.reloadData('userTest', {
                                            page: {
                                                curr: 1 // 重新从第 1 页开始
                                            }
                                        });
                                    },
                                    function (errMsg) {
                                        toast.error({
                                            message: errMsg,
                                        });
                                    }
                                );
                                return false; // 阻止默认 form 跳转
                            });
                        }
                    });
                }
                if (operType == 'detail') {
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px'],
                        title: false,
                        title: '用户详情',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        // maxmin: true, // 允许全屏最小化
                        anim: 'slideLeft', // 0-6 的动画形式，-1 不开启
                        closeBtn: 2,
                        content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">用户名</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" readonly lay-reqtext="用户名必填" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号</label>
                                         <div class="layui-input-block">
                                        <input type="text" name="mobile"  lay-verify="phone"  placeholder="手机号" lay-reqtext="手机号" readonly autocomplete="off" class="layui-input">
                                    </div> </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱</label>
                                         <div class="layui-input-block">
                                        <input type="text" name="email"   lay-verify="email" placeholder="邮箱" lay-reqtext="邮箱" readonly autocomplete="off" class="layui-input">
                                    </div> </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">公司</label>
                                         <div class="layui-input-block">
                                        <input type="text" name="orgName" lay-verify="required"  placeholder="公司" readonly class="layui-input" >
                                    </div> </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label">部门</label>
                                         <div class="layui-input-block">
                                        <input type="text" name="deptName" lay-verify="required"  placeholder="部门" readonly class="layui-input" >
                                    </div> </div>

                                    <div class="layui-form-item">      
                                        <label class="layui-form-label">状态</label>   
                                         <div class="layui-input-block">                           
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" disabled  title="启用|禁用" lay-skin="switch" >
                                        </div> </div>
                                    </div>
                                </div>`,
                        success: function (layero, index, that) {
                            // 对弹层中的表单进行初始化渲染
                            form.render();
                            form.val('filter-test-layer', {
                                "username": data.username,
                                "mobile": data.mobile,
                                "email": data.email,
                                "orgName": data.orgName,
                                "deptName": data.deptName,
                                "status": data.status
                            });
                        }
                    });
                }
                if (operType == 'add') {
                    layer.open({
                        type: 1, // page 层类型
                        area: ['500px'],
                        title: false,
                        title: '用户新增',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        // maxmin: true, // 允许全屏最小化
                        anim: 'slideLeft', // 0-6 的动画形式，-1 不开启
                        closeBtn: 2,
                        content: `<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                                    <div class="layui-form-item">
                                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="用户名必填" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <input type="text" name="mobile"  lay-verify="phone"  placeholder="手机号" lay-reqtext="手机号" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item">
                                        <input type="text" name="email"   lay-verify="email" placeholder="邮箱" lay-reqtext="邮箱" autocomplete="off" class="layui-input">
                                    </div>

                                    <div class="layui-form-item layui-hide">
                                        <input type="text" name="deptId" placeholder="部门ID" readonly class="layui-input">
                                    </div>
                                    <div class="layui-form-item">
                                        <input type="text" name="deptName" lay-verify="required" id="bumen-select"  placeholder="部门" readonly class="layui-input" lay-on="bumen-select">
                                    </div>

                                    <div class="layui-form-item">                                    
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <input type="checkbox" name="status" id="status" checked value="1" title="启用|禁用" lay-skin="switch" lay-filter="demo-checkbox-filter">
                                        </div>
                                    </div>
            
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-sm layui-btn-fluid" lay-submit lay-filter="userAdd">确认</button>
                                    </div>
                                </div>`,
                        success: function (layero, index, that) {
                            // 对弹层中的表单进行初始化渲染
                            form.render();

                            // 部门选择
                            $("#bumen-select").on('click', function (data) {
                                layer.open({
                                    type: 1,
                                    area: ['480px', '400px'],
                                    content: `<div style="padding: 16px;">
                                            <div class="layui-card">
                                                <div class="layui-card-body">
                                                    <div id="ID-tree-demo"></div>
                                                </div>
                                            </div>
                                        </div>`,
                                    title: '选择部门',
                                    shadeClose: true,
                                    success: function (layero, index, that) {
                                        layui.use(function () {
                                            var tree = layui.tree;
                                            var layer = layui.layer;
                                            var util = layui.util;
                                            var toast = layui.toast;
                                            var ajaxUtils = layui.AjaxUtils;

                                            ajaxUtils.request(
                                                {
                                                    url: '/auth/org/all-tree-org',
                                                    type: 'GET'
                                                }, function (data) {
                                                    // 渲染
                                                    tree.render({
                                                        elem: '#ID-tree-demo',
                                                        data: data,
                                                        showCheckbox: false,  // 是否显示复选框
                                                        onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                                                        id: 'demo-id-1',
                                                        isJump: true, // 是否允许点击节点时弹出新窗口跳转
                                                        // edit: ['add', 'update', 'del'],
                                                        click: function (obj) {
                                                            var data = obj.data;  //获取当前点击的节点数据
                                                            var orgType = data.orgType;

                                                            if (orgType != 3) {
                                                                layer.msg('请选择部门');
                                                                return;
                                                            }
                                                            layer.close(index);// 关闭弹框
                                                            // 设置部门ID
                                                            form.val('filter-test-layer', {
                                                                "deptId": data.id,
                                                                "deptName": data.title
                                                            });
                                                        }
                                                    });
                                                    // 按钮事件
                                                    util.event('lay-on', {
                                                        getChecked: function (othis) {
                                                            var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据

                                                            layer.alert(JSON.stringify(checkedData), { shade: 0 });

                                                        },
                                                        setChecked: function () {
                                                            tree.setChecked('demo-id-1', [3]); // 勾选对应 id 值的节点
                                                        },
                                                        reload: function () {
                                                            tree.reload('demo-id-1', {}); // 重载实例
                                                        }
                                                    });
                                                },
                                                function (error) {
                                                    toast.error({
                                                        message: error,
                                                    });
                                                }
                                            );
                                        });
                                    }
                                });
                            });


                            // 表单提交事件
                            form.on('submit(userAdd)', function (data) {
                                var field = data.field; // 获取表单字段值
                                // 校验


                                // 此处可执行 Ajax 等操作


                                // 获取复选框的值
                                var selectedValues = 1;
                                if ($('#status').is(':checked')) {
                                    // 选中
                                    selectedValues = 1;
                                } else {
                                    // 未选中
                                    selectedValues = 0;
                                }

                                var user = {
                                    username: field.username,
                                    mobile: field.mobile,
                                    email: field.email,
                                    deptId: field.deptId,
                                    status: selectedValues
                                }
                                AjaxUtils.request(
                                    {
                                        url: '/auth/user',
                                        type: 'POST',
                                        data: user
                                    }, function (data) {
                                        // 关闭弹层&刷新表格
                                        layer.close(index);

                                        // 重新加载表格
                                        table.reloadData('userTest', {
                                            page: {
                                                curr: 1 // 重新从第 1 页开始
                                            }
                                        });
                                    },
                                    function (errMsg) {
                                        toast.error({
                                            message: errMsg,
                                        });
                                    }
                                );
                                return false; // 阻止默认 form 跳转
                            });
                        }
                    });
                }

            }

            // 分配角色
            function setRole(data) {
                // 打开角色列表
                layer.open({
                    title: '分配角色',
                    type: 1,
                    area: ['680px', '520px'],
                    content: '<div class="layui-card-body"><table class="layui-hide" id="roleTest2" lay-filter="roleTest2"></table></div>',
                    fixed: false, // 不固定
                    maxmin: true,
                    shadeClose: true,
                    btn: ['确认', '取消'],
                    btnAlign: 'c',
                    success: function (layero, index, that) {
                        table.render({
                            elem: '#roleTest2',
                            url: constants.API_BASE_URL + '/auth/role/user-roles/'+data.id,
                            method: 'post',
                            contentType: 'application/json',
                            headers: { 'token': localStorage.getItem("token") },
                            request: {
                                pageName: 'pageNum', // 页码的参数名称，默认：page
                                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
                            },
                            response: {
                                statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
                            },
                            page: true,
                            size: 'lg',
                            cols: [[
                                { type: 'checkbox', fixed: 'left' },
                                { field: 'roleName', width: '25%', title: '角色名称' },
                                { field: 'remark', width: '25%', title: '备注' },
                                {
                                    field: 'status', title: '状态', width: '25%', templet: function (d) {
                                        if (d.status == 1) {
                                            return '<span style="color: #36b368">启用</span>';
                                        } else if (d.status == 0) {
                                            return '<span style="color: #f56c6c">禁用</span>';
                                        }
                                        else {
                                            alert("状态错误");
                                        }
                                    }
                                },
                                { field: 'createTime', width: '25%', title: '创建时间' }
                            ]],
                            error: function (res, msg) {
                                toast.error({
                                    message: msg,
                                });
                            },
                            complete: function (xhr, ts) {
                                if (xhr.responseJSON.code == 520) {
                                    AjaxUtils.redirectToLogin();
                                }
                            }
                        });
                    },
                    btn1: function (index, layero, that) {
                        // 获取选中的角色
                        var checkStatus = table.checkStatus('roleTest2');

                        if (checkStatus.data.length == 0) {
                            layer.msg('请选择角色');
                            return;
                        }

                        // 获取选中的角色ID
                        var selectRoleId = [];
                        checkStatus.data.forEach(function (item) {
                            selectRoleId.push(item.id);
                        });

                        // 分配角色
                        AjaxUtils.request(
                            {
                                url: '/auth/user/bindRole',
                                type: 'POST',
                                data: {
                                    userId: data.id,
                                    roleIdSet: selectRoleId
                                }
                            }, function (data) {
                                // 提示
                                toast.success({
                                    message: '角色分配成功',
                                });

                                // 关闭弹层
                                layer.close(index);

                                // 重新加载表格
                                table.reloadData('userTest', {
                                    page: {
                                        curr: 1 // 重新从第 1 页开始
                                    }
                                });
                            },
                            function (errMsg) {
                                toast.error({
                                    message: errMsg,
                                });
                            }
                        );
                    },
                    btn2: function (index, layero, that) {
                        layer.close(index);
                    }
                });
            }


            // 修改密码
            function updatePsd(data) {
                layer.prompt({ title: '请输入新密码', formType: 1 }, function (value, index, elem) {
                    layer.confirm('确认修改密码吗', {
                        btn: ['确定', '关闭'] //按钮
                    }, function () {
                        var updatePsd = {
                            userId: data.id,
                            newPassword: value
                        };
                        AjaxUtils.request(
                            {
                                url: '/auth/user/updatePassword',
                                type: 'POST',
                                data: updatePsd,
                            }, function (data) {
                                // 提示
                                toast.success({
                                    message: '密码修改成功',
                                });

                                // 关闭弹层
                                layer.closeAll();
                            },
                            function (errMsg) {
                                toast.error({
                                    message: errMsg,
                                });
                            }
                        );
                    }, function () { });
                });
            }
        });
    </script>
</body>

</html>